<template lang="">
  <div :style="{ marginBottom: marginBottom }">
    <div class="public_header">
      <div class="public_section">
        <div class="public_head_form">
          <el-form label-width="auto">
            <el-form-item label="访问量：">
              <div class="text"><span style="color: #f20000">6,097,138</span> 次</div>
            </el-form-item>
          </el-form>
        </div>
        <div class="public_head_menu_section">
          <el-menu :default-active="activeIndex" :router="true" class="public_head_menu" mode="horizontal">
            <el-menu-item index="" line="true">登录</el-menu-item>
            <el-menu-item index="">注册</el-menu-item>
            <el-menu-item index="" type="sjhj">
              <span class="icon"></span>
              数据汇交
            </el-menu-item>
            <el-menu-item index="" type="yhbz">
              <span class="icon"></span>
              用户帮助
            </el-menu-item>
            <el-sub-menu index="">
              <template #title>工作人员入口</template>
              <el-menu-item index="2-1">协同办公系统</el-menu-item>
              <el-menu-item index="2-2">后台管理系统</el-menu-item>
              <el-menu-item index="2-3">大数据分析平台</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="">关于我们</el-menu-item>
          </el-menu>
        </div>
        <div class="public_head_logo_section">
          <router-link to="/">
            <img src="@/assets/images/nstilogo.png" alt="" />
          </router-link>
          <router-link to="/">
            <img src="@/assets/images/ncmi-logo.png" alt="" />
          </router-link>
        </div>
      </div>
    </div>
    <div v-if="navigationList.length > 0" class="breadcrumb_section">
      <div class="public_section">
        <div class="section">
          <el-breadcrumb v-if="navigationList" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">HOME</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: item.url }" v-for="(item, index) in navigationList" :key="index">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  marginBottom: {
    type: String,
    default: "0px"
  },
  activeIndex: {
    type: String,
    default: "index"
  },
  searchShow: {
    type: Boolean,
    default: false
  },
  navigationList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
</script>
<style lang="scss" scoped>
:deep(.public_header) {
  background-color: rgba(255, 255, 255, 0.9);

  .public_head_form {
    float: right;
    padding: 6px 0;
    margin-left: 8px;

    .el-form {
      .el-form-item {
        margin: 0;

        .el-form-item__label {
          padding: 0;
        }
      }
    }
  }

  .public_head_menu_section {
    float: right;

    .public_head_menu {
      height: 44px;
      border: none;
      width: 525px;
      background-color: transparent;
      justify-content: flex-end;

      .el-menu-item {
        padding: 0 8px;
        height: 44px;
        line-height: 44px;
        color: #666667;
        position: relative;
        border-bottom: none;

        span {
          &.icon {
            width: 20px;
            height: 44px;
            display: inline-block;
          }
        }

        &[line="true"]::after {
          top: 50%;
          right: 0;
          width: 1px;
          height: 14px;
          content: "";
          position: absolute;
          transform: translateY(-50%);
          background-color: #666667;
        }

        &.is-active {
          border-bottom: none;
          color: #666667;
        }

        &:not(.is-disabled):focus,
        &:not(.is-disabled):hover {
          background-color: transparent !important;
        }

        &[type="sjhj"] {
          span.icon {
            margin-top: -2px;
            background: url("@/assets/images/addshuju.png") no-repeat center center;
          }
        }

        &[type="yhbz"] {
          span.icon {
            margin-top: -2px;
            background: url("@/assets/images/helpicon.png") no-repeat center center;
          }
        }

        &:hover {
          color: #006aa8;
          text-decoration: underline;

          &[type="sjhj"] {
            span.icon {
              margin-top: -2px;
              background: url("@/assets/images/jiaohuion.png") no-repeat center center;
            }
          }

          &[type="yhbz"] {
            span.icon {
              margin-top: -2px;
              background: url("@/assets/images/helpon.png") no-repeat center center;
            }
          }
        }
      }

      .el-sub-menu {
        .el-sub-menu__title {
          padding-left: 8px;
          padding-right: 25px;

          &:hover {
            color: #006aa8;
            text-decoration: underline;
            background-color: transparent !important;
          }

          .el-icon {
            right: 8px;
          }
        }
      }
    }
  }

  .public_head_logo_section {
    overflow: hidden;

    a {
      line-height: 44px;
      display: inline-block;
      vertical-align: top;
      margin-right: 15px;

      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

:deep(.header_search_section) {
  margin: 35px auto 30px;
  width: 918px;

  .header_search_operation {
    margin-bottom: 13px;

    .operation_inline {
      padding: 3px;
      display: inline-block;
      background-color: rgba($color: #ffffff, $alpha: 0.5);
      border-radius: 30px;
      border: solid 1px #ffffff;

      a {
        color: #0e0e0e;
        line-height: 20px;
        padding: 6px 10px;
        display: inline-block;
        border-radius: 25px;

        &.active {
          font-weight: 600;
          color: #ffffff;
          background-image: linear-gradient(0deg, #b280ca 0%, #fe5f90 100%);
        }
      }
    }
  }

  .input-with-select {
    height: 56px;
    box-shadow:
      -4px 3px 8px 1px rgba(80, 107, 228, 0.69),
      8px 13px 15px 3px rgba(181, 127, 199, 0.4);
    border-radius: 37px;

    .el-input-group__prepend {
      background-color: #fff;
      border-radius: 37px 0 0 37px;

      .el-select {
        .el-input {
          width: 210px;

          .el-input__inner {
            height: 56px;
          }

          .el-select__caret {
            font-size: 20px;
            color: #7a528a;
          }
        }
      }
    }

    & > .el-input__inner {
      border: 0;
      height: 56px;
      font-size: 20px;
      margin: 1px 0;
    }

    .el-input-group__append {
      padding: 0 5px 0 10px;
      background-color: #fff;
      border-radius: 0 37px 37px 0;

      .operation {
        height: 46px;
        background-image: linear-gradient(90deg, rgba(93, 138, 238, 0.3) 0%, rgba(156, 91, 236, 0.3) 100%);
        border-radius: 28px;

        a {
          padding: 0 25px;
          font-size: 18px;
          line-height: 46px;
          text-align: center;
          color: #000000;
          border-radius: 28px;
          display: inline-block;

          &.active {
            font-weight: 600;
            color: #ffffff;
            background-image: linear-gradient(0deg, #b280ca 0%, #fe5f90 100%);
          }
        }
      }
    }
  }
}

:deep(.breadcrumb_section) {
  padding: 1px 0px;
  background-color: #ffffff;
  border-bottom: 2px solid #6f8ceb;

  .el-breadcrumb {
    .el-breadcrumb__item {
      padding: 9px 0;
      font-size: 14px;
      line-height: 20px;
      color: #000000;

      .el-breadcrumb__inner {
        line-height: 20px;
        display: inline-block;
        vertical-align: top;

        &.is-link {
          font-weight: 500;
        }
      }

      .el-breadcrumb__separator {
        color: #000000;
      }
    }
  }
}
</style>
